function Panel(canvas){
	this.canvas = canvas;
	this.context = this.canvas[0].getContext("2d");
	this.tools = new Array(); 
	this.paint = false;
	this.curTool = null; 

	// use all tools to redraw
	this._redraw = function(){
		for(var i=0; i<this.tools.length; i++){
			that.tools[i].redraw(this.context);
		}
	};

	// set bindings
	var that = this;
	function _setBindings(){
		that.canvas.mousedown(function(e){
			if(that.curTool instanceof Brush){
				var mouseX = e.pageX - this.offsetLeft;
				var mouseY = e.pageY - this.offsetTop;
				that.curTool.addRecord(mouseX, mouseY, that.paint);
			}
			that.paint = true;
			that._redraw();
		});
		that.canvas.mousemove(function(e){
			if(that.curTool instanceof Brush){
				if(that.paint) {
					var mouseX = e.pageX - this.offsetLeft;
					var mouseY = e.pageY - this.offsetTop;
					that.curTool.addRecord(mouseX, mouseY, that.paint);
				}
			}
			that._redraw();
		});
		that.canvas.mouseup(function(e){
			that.paint = false;
		});
		that.canvas.mouseleave(function(e){
			that.paint = false;
		});
	};

	// set tool
	this.setTool = function(tool){
		this.curTool = tool;
		this.tools.push(this.curTool);
	}

	// set image
	this.setImage = function(uri){
		var image = new Image();
		image.onload = function(){
			this.context.drawImage(image, 0, 0, this.canvas.width, this.canvas.height);
		}
	}

	_setBindings();
};
